<template>
  <div class="waitPay">
    <div v-if="unPayList.length > 0">
      <pay-item v-for="item in unPayList" @pay="pay" :data="item"></pay-item>
    </div>
    <div v-if="loading" style="padding: 20px 0;">
      <van-skeleton title row="3" />
      <van-skeleton title row="3" />
      <van-skeleton title row="3" />
      <van-skeleton title row="3" />
    </div>
    <searchEmpty v-if="unPayList.length === 0 && !loading"></searchEmpty>
  </div>
</template>

<script setup lang='ts'>
import payItem from '../payItem/payItem.vue';
import { fetchUnPay } from '@/api/pay';
import { onMounted, ref } from 'vue';
import searchEmpty from '../searchEmpty/searchEmpty.vue';
import { IUnPay } from '../../type';
import { useRouter } from 'vue-router';
const router = useRouter()
const unPayList = ref<IUnPay[]>([]);
const loading = ref(true)
async function getUnPay() {
  try {
    let res = await fetchUnPay({
      token: ''
    });
    if (res.code === 200)
      unPayList.value = res.data as IUnPay[];
  } catch (error) {
    console.error(error);
  } finally {
    loading.value = false
  }

}
onMounted(() => {
  getUnPay();
})
async function pay(data: IUnPay) {
  router.push({
    path: 'pay-detail',
    query: { ...data }
  })
}
</script>

<style lang='less' scoped>
.waitPay {
  position: relative;
  padding: 10px 17.2px;
  background-color: #f4f7fa;
  height: 100%;
  box-sizing: border-box;
}
</style>
<style lang="less">
.waitPay {}
</style>